<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				height: 300px;
			}
			#outDial{
				margin: 0 auto;
				position: relative;
				height: 240px;
				width: 240px;
				background-color: royalblue;
			}
			#container{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-color: aqua;
				top: 20px;
				left: 20px;
				position: relative;
			}
			#HourBox{
				position: absolute;
				top: 31%;
				left: 48.5%;
				width: 5px;
				height: 40%;	
				transform: rotate(120deg); 
			}
			#MinuteBox{
				position: absolute;
				top: 22.5px;
				left: 99.5px;
				width: 2px;
				height: 80%;
				
			} 
			#SecondBox{
				position: absolute;
				top: 7px;
				left: 99.5px;
				width: 1px;
				height: 95%;
			}
			#circleCenter{
				position: absolute;
				top: 50%;
				left: 97.5px;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: black;
				z-index: 9999;
			}
			.Top{
				height: 51%;
				background-color: dodgerblue;
			}
			.Bottom{
				height: 49%;
			}
			
			.time{
				width: 15px;
				height: 200px;
				font-size: 8px;
				position: absolute;
				left: 46%;
			}
			#Time2{
				transform: rotate(30deg);
			}
			#Time3{
				transform: rotate(60deg);
			}
			#Time4{
				width: 190px;
				height: 15px;
				font-size: 8px;
				position: absolute;
				top: 46%;
				left: 2%;
			}
			#t4Left{
				position: absolute;
				left: 5%;
			}
			#t4Right{
				position: absolute;
				right: 5%;
			}
			#Time5{
				transform: rotate(-60deg);
			}
			#Time6{
				transform: rotate(-30deg);
			}
			
			.tTop{
				width: 100%;
				position: absolute;
				top: 5%;
				text-align: center;
			}
			.tBottom{
				width: 100%;
				position: absolute;
				bottom: 5%;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div id="outDial">
			<div id="container">
				<div id="HourPineLeave">
					<div id="HourBox">
						<div id="HourTop" class="Top"></div>
						<div id="HourBotton" class="Bottom"></div>
					</div>
				</div>
				<div id="circleCenter"></div>
				<div id="MinutePineLeave">
					<div id="MinuteBox">
						<div id="HourTop" class="Top"></div>
						<div id="HourBotton" class="Bottom"></div>
					</div>
				</div>
				<div id="SecondPineLeave">
					<div id="SecondBox">
						<div id="HourTop" class="Top"></div>
						<div id="HourBotton" class="Bottom"></div>
					</div>
				</div>
				<div id="Time1" class="time">
					<div class="tTop">12</div>
					<div class="tBottom">6</div>
				</div>
				<div id="Time2" class="time">
					<div class="tTop">1</div>
					<div class="tBottom">7</div>
				</div>
				<div id="Time3" class="time">
					<div class="tTop">2</div>
					<div class="tBottom">8</div>
				</div>
				<div id="Time4">
					<div id="t4Left">9</div>
					<div id="t4Right">3</div>
				</div>
				<div id="Time5" class="time">
					<div class="tTop">10</div>
					<div class="tBottom">4</div>
				</div>
				<div id="Time6" class="time">
					<div class="tTop">11</div>
					<div class="tBottom">5</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = ()=>{
			setInterval(GetCurrentTime,200);
			$ = function(id){return (typeof(id) =='object')?id:document.getElementById(id);};
		}
		function GetCurrentTime(){
			let now = new Date();
			let hours = now.getHours();
			let minutes = now.getMinutes();
			let seconds = now.getSeconds();
			let houDegree = 360*(hours / 12 + minutes / 60 / 12 + seconds / 3600 / 12);  
			let minDegree = 360*(minutes / 60 + seconds / 60 / 60);
			let secDegree = 360*(seconds / 60);
			console.log(hours);
			
			$("HourBox").style.transform= "rotate("+houDegree+"deg)";
			$("MinuteBox").style.transform= "rotate("+minDegree+"deg)";
			$("SecondBox").style.transform= "rotate("+secDegree+"deg)";
			// $("HourBox").style.backgroundColor= "red";
		}
	</script>
</html>
